<template>
  <div class="working-calendar">
    <el-card v-if="!edit">
      <el-row>
        <el-col :span="18">
          <el-select v-model="workCalendar" placeholder="请选择">
            <el-option label="" value=""></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" plain size="small">使用此日历</el-button>
          <el-button type="primary" icon="el-icon-edit" plain size="small">
            编辑日历
          </el-button>
          <el-button type="primary" icon="el-icon-plus" plain size="small">
            新建日历
          </el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="position: relative">
      <el-form class="form" :model="form" label-width="140px">
        <el-form-item label="日历名称" class="calendarName">
          <el-input v-model="form.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="勾选休息时间">
          <el-checkbox-group v-model="form.breakTime">
            <el-checkbox label="星期一"></el-checkbox>
            <el-checkbox label="星期二"></el-checkbox>
            <el-checkbox label="星期三"></el-checkbox>
            <el-checkbox label="星期四"></el-checkbox>
            <el-checkbox label="星期五"></el-checkbox>
            <el-checkbox label="星期六"></el-checkbox>
            <el-checkbox label="星期日"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="日常工作时间">
          <el-select v-model="form.operatingHours" placeholder="">
            <el-option label="" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="法定节假日自动排休">
          <el-switch v-model="form.automaticallyScheduleHolidays"></el-switch>
        </el-form-item>
        <el-form-item label="例外日设置">
          <div
            v-for="(item, index) in form.exceptionDay"
            :key="index"
            style="margin-bottom: 20px"
          >
            <el-row class="exceptionDaySetting" type="flex">
              <el-col :span="3">
                <el-date-picker
                  v-model="item.time"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-col>
              <el-col :span="3">
                <el-select v-model="item.exceptionDay" placeholder="请选择">
                  <el-option label="" value=""></el-option>
                </el-select>
              </el-col>
              <el-col :span="3">
                <el-select v-model="item.hours" placeholder="请选择">
                  <el-option label="" value=""></el-option>
                </el-select>
              </el-col>
              <el-col :span="3">
                <el-input
                  v-model="item.remark"
                  placeholder="备注说明"
                ></el-input>
              </el-col>
              <el-col :span="3">
                <i class="el-icon-delete" @click="deleteRow(item, index)"></i>
              </el-col>
            </el-row>
          </div>
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            @click="addExceptionDay"
          >
            添加例外日
          </el-button>
        </el-form-item>
        <el-form-item label="" class="submit">
          <el-button type="primary" plain>保存日历</el-button>
          <el-button type="primary" plain>返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <div class="header-title">
          <div>
            <span class="el-icon-arrow-left"> </span>
          </div>
          <h4>W1(2023-01-02) — W4（2023-01-29）</h4>
          <div>
            <span class="el-icon-arrow-right"></span>
          </div>
        </div>
        <div class="right">
          <span>本周别工作天数: 15天</span>
          <span>四周工作时间(h): 120</span>
          <i class="workingDay">工作日</i>
          <i class="restDay">休息日</i>
          <i class="exceptionDay">例外日</i>
        </div>
      </div>
      <div class="week">
        <el-row>
          <el-col :span="25" v-for="(item, index) in week" :key="index">
            <span> {{ item }} </span>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-row :gutter="20" class="rows2">
      <el-col :span="2">
        <el-card class="card2">
          <div class="left">
            <span> W1 </span>
            <span> W2 </span>
            <span> W3 </span>
            <span> W4 </span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="22">
        <el-card class="card-card">
          <el-row :gutter="15" class="card">
            <el-col v-for="(item, index) in 28" :key="index" :span="25">
              <div class="grid-content bg-purple">
                <h6>02</h6>
                <span>0小时</span>
                <i class="icon workingDay"></i>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      workCalendar: "",
      week: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      edit: true,
      form: {
        breakTime: [],
        exceptionDay: [{}],
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    addExceptionDay() {
      this.form.exceptionDay.push({});
    },
    deleteRow(item, index) {
      this.form.exceptionDay.splice(index, 1);
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/styles/element-variables.scss";
.working-calendar {
  width: 100%;
  .form {
    .calendarName {
      width: 40%;
    }
    .exceptionDaySetting {
      .el-col {
        margin-right: 10px;
      }
    }
  }
  .submit {
    position: absolute;
    right: 20px;
    top: 23px;
  }
  .el-card {
    padding: 10px;
    margin-bottom: 20px;
  }
  .clearfix {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      span {
        font-size: 16px;
        color: #61677a;
        margin-left: 10px;
      }
      i {
        display: inline-block;
        width: 66px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        font-size: 14px;
        border-radius: 2px;
        margin-left: 10px;
        color: #fff;
      }
    }
  }
  .week {
    width: 100%;
    padding-left: 140px;
    .el-row {
      width: 100%;
    }
    span {
      display: inline-block;
      text-align: center;
      width: 100%;
      color: #61677a;
    }
  }
  .rows2 {
    height: 520px;
    .el-col {
      height: 100%;
    }
    .el-card {
      height: 100%;
    }
    .card-card {
      ::v-deep .el-card__body {
        padding-top: unset;
      }
    }
    .card2 {
      .left {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        span {
          color: #61677a;
        }
      }
    }

    .card {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      padding: unset;

      .grid-content {
        position: relative;
        width: 100%;
        height: 108px;
        background: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 10px;
        margin-bottom: 20px;
        padding: 20px;
        h6 {
          font-size: 32px;
          margin-top: unset;
          margin-bottom: 10px;
        }
        span {
          color: #b3b3b3;
          font-size: 16px;
        }
        .icon {
          position: absolute;
          right: 5%;
          top: 5%;
          width: 20px;
          height: 8px;
          border-radius: 4px;
        }
      }
      //   :nth-child(7n) {
      //     margin-right: unset;
      //   }
    }
  }
  .el-col-25 {
    width: calc(100% / 7);
  }
  .workingDay {
    background: #307ef0;
    margin-left: 30px;
  }
  .restDay {
    background: #ff9e51;
  }
  .exceptionDay {
    background: #ff5151;
  }
  .header-title {
    display: flex;
    align-items: center;
    div {
      width: 28px;
      height: 28px;
      border: 2px solid #3091f2;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        color: $--color-primary;
      }
    }
    h4 {
      margin: 0 15px;
    }
  }
}
</style>
